<template>

  <el-container class="home-container">
    <!--头部区域      -->
    <el-header class="header">

          <div class="grid-content bg-purple-dark" style="margin-left: 5%">
             <img src="../assets/img/logo.png" style="width: 50px;height:50px;">
              <span class="logo">您好，欢迎使用校园预约挂号</span>
          </div>

          <div style="margin-left:30% ;width: 270px">

             <el-dropdown >
               <div class="el-dropdown-link" style=" color: #fff;font-size: 20px;" >
                 <span class="el-icon-user-solid " style="margin-right: 5px"> </span>
                 个人中心
               </div>
               <el-dropdown-menu slot="dropdown">
                 <router-link to="/userInfo">
                   <el-dropdown-item >个人信息</el-dropdown-item>
                 </router-link>
                 <router-link to="/password">
                 <el-dropdown-item>修改密码</el-dropdown-item>
                 </router-link>
               </el-dropdown-menu>
             </el-dropdown>

            <div style="margin-left: 5%;" @click="userlogout">
              <span class="el-icon-setting "  style="margin-right: 5px"> </span>
              退出登录
            </div>
          </div>
    </el-header>
    <el-container>
      <!--        侧边栏-->
      <el-aside class="aside" :width="isCollapse ? '64px': '200px' ">
        <div class="toggle-button" @click="toggleCollapse">
          <i :class="isCollapse ?'el-icon-s-unfold':'el-icon-s-fold'"></i>
        </div>

        <el-menu
          :default-active="activePath"
          background-color="#fff"
          text-color="#6c757d"
          active-text-color="#6777ef" unique-opened :collapse="isCollapse" :collapse-transition="false" :router="true">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>预约挂号</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/appointment" @click="saveNavState('appointment')">
                <template slot="title">
                  <i class="el-icon-star-on"></i>
                  <span>预约</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/appointmentLog" @click="saveNavState('appointmentLog')">
                <template slot="title">
                  <i class="el-icon-star-on"></i>
                  <span>就诊纪录</span>
                </template>
              </el-menu-item>
            </el-menu-item-group>

          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-star-on"></i>
              <span>积分管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/pointExchange" @click="saveNavState('/pointExchange')">积分信息</el-menu-item>
              <el-menu-item index="/goodsExchange" @click="saveNavState('/goodsExchange')">积分兑换</el-menu-item>
            </el-menu-item-group>

          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-finance"></i>
              <span>志愿模块</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/volunteerActivities" @click="saveNavState('/volunteerActivities')">
                <template slot="title">
                  <i class="el-icon-star-on"></i>
                  <span>志愿报名</span>
                </template>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-finance"></i>
              <span>个人信息</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/userInfo" @click="saveNavState('/userInfo')">
                <template slot="title">
                <i class="el-icon-star-on"></i>
                <span>个人信息</span>
              </template>
              </el-menu-item>
              <el-menu-item index="/password" @click="saveNavState('/password')">
                <template slot="title">
                  <i class="el-icon-star-on"></i>
                  <span>修改密码</span>
                </template>
              </el-menu-item>
            </el-menu-item-group>

          </el-submenu>

          <el-menu-item index="/problem" @click="saveNavState('/problem')">
            <template   slot="title">
              <i class="el-icon-s-finance"></i>
              <span>问题反馈</span>
            </template>
          </el-menu-item>

        </el-menu>
      </el-aside>
      <!--        右侧内容主体-->
      <el-main class="main">
        <router-view>

        </router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
import { logout } from '../api/user'
import { removeToken } from '../utils/auth'
export default {
  name: 'Home',
  data () { // 选项 / 数据
    return {
      nickName: '黄梦英国11',
      // 是否折叠
      isCollapse: false,
      // 被激活的链接地址
      activePath: ''
    }
  },
  created () {
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods: { // 事件处理器
    // 用户退出登录
    userlogout: function () {
      const that = this
      this.$confirm('是否确认退出?', '退出提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // console.log(that.$route.path);

        logout().then((response) => {
          removeToken()
          localStorage.removeItem('userInfo')
          that.haslogin = false
          window.location.reload()
          that.$message({
            type: 'success',
            message: '退出成功!'
          })
          if (that.$route.path == '/UserInfo') {
            that.$router.push({
              path: '/'
            })
          }
        }).catch(() => {
          //
        })
      }).catch(() => {
        //
      })
    },

    // 点击按钮，切换菜单的折叠和点开
    toggleCollapse () {
      this.isCollapse = !this.isCollapse
    },
    saveNavState (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }

  }
}
</script>

<style scoped>
.home-container{
  height: 100%;
}
.el-menu{
  height:100vh
}
.header{
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
}

.header div{
  display: flex;
  align-items: center;
}

.el-menu-item-group__title{
  padding: 0;
}
.aside{
  background-color: #fff;
  height: 100%;
}
.el-menu{
  border-right: none;
}

.logo{
  font-weight: 700;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.toggle-button{
  background-color: #fff;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}

</style>
